<template>
    <div class="buy p-0 lg:py-12 lg:px-6">
        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-12 mx-auto">
            <el-card class="grid-span-1" shadow="hover" :data-hot="$t('common.hot')"
                     :class="{'dark':index===accountConfigList.length-1}"
                     v-for="(x,index) in accountConfigList">
                <div class="card-center">
                    <div class="title">{{ $t('account.type.' + x.AccountType) || x.DisplayName }}</div>
                    <div class="subtitle">{{ $t('account.memo.' + x.AccountType) || x.Memo || '&nbsp;' }}</div>
                    <div class="price">{{ x.Price }}</div>
                    <router-link :to="{path:'./confirmorder',query:{type:x.AccountType}}">
                        <el-button :plain="index<accountConfigList.length-1"
                                   type="primary">立即购买
                        </el-button>
                    </router-link>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import {getAccountConfigList} from '@/api/utils'

const accountConfigList = ref([])
const initData = async () => {
    accountConfigList.value = await getAccountConfigList()
}
initData();
</script>

<style lang="scss" scoped>
.grid {
    max-width: 1060px;

    .dark {
        background: #1e313a;
        color: #fff;
        position: relative;

        .card-center {
            .price,
            .title,
            .subtitle {
                color: #fff;
            }
        }

        &::before { // 热门标签
            content: attr(data-hot);
            position: absolute;
            display: inline-block;
            transform: rotate(45deg);
            font-size: 14px;
            font-weight: 500;
            right: 10px;
            top: 10px;
            z-index: 2;
        }

        &::after { // 三角形角标
            content: '';
            position: absolute;
            top: -70px;
            right: -70px;
            width: 120px;
            height: 120px;
            transform: rotate(225deg);
            color: #fff;
            background: #e99b35;
        }
    }

    .card-center {
        @apply flex flex-col items-center justify-center py-10;

        .title {
            font-size: 24px;
            font-weight: 600;
            color: #142225;
            margin: 0 auto 10px;
            line-height: 1.5;
        }

        .subtitle {
            font-size: 16px;
            color: #5c7070;
            line-height: 1.75;
        }

        .price {
            font-size: 50px;
            line-height: 1.4;
            font-weight: 900;
            color: #142225;
            margin: 45px auto 65px;

            &:before {
                content: "$";
                font-size: 32px;
                font-weight: 500;
                margin-right: 4px;
            }
        }

        .el-button {
            font-size: 20px;
            font-weight: 500;
            width: 150px;
            height: 48px;
        }
    }
}
</style>
